const {src,dest,series,watch} = require("gulp")
const uglify = require("gulp-uglify")
const rename = require("gulp-rename")
const sass = require("gulp-sass")
const htmlmin = require("gulp-htmlmin")
const autoprefixer = require("gulp-autoprefixer")
const connect = require("gulp-connect")
const babel = require("gulp-babel")
const clean = require("gulp-clean")
const open = require("open")
const cleanCss = require("gulp-clean-css")

// 一个插件可以代替所有的插件，导入进来的是一个函数
// const $ = require("gulp-load-plugins")()


// 定义任务
// 处理css
function handlerCss(cb){
    src("./src/sass/*.scss")
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCss())
    .pipe(rename({
        suffix:".min"
    }))
    .pipe(dest("./css"))
    .pipe(connect.reload())
    cb()
}

// 处理js
function handlerJs(cb){
    src("./src/js/*.js")
    .pipe(babel({
        presets:["es2015"]
    }))
    .pipe(uglify())
    .pipe(rename({
        suffix:".min"
    }))
    .pipe(dest("./js"))
    .pipe(connect.reload())
    cb()
}

// 处理html
function handlerHtml(cb){
    src("./src/*.html")
    .pipe(htmlmin({
        collapseWhitespace:true
    }))
    .pipe(dest("./"))
    .pipe(connect.reload())
    cb()
}
// 清空目标文件夹
function cleanDir(cb){
    src("./dist",{allowEmpty:true})
    .pipe(clean())
    cb()
}

// 监视命令以及自动刷新浏览器
function server(cb){
    connect.server({
        root:"./dist",
        port:5555,
        livereload:true
    })
    watch("./src/*.html",{ignoreInitial:false},handlerHtml)
    watch("./src/js/*.js",{ignoreInitial:false},handlerJs)
    watch("./src/sass/*.scss",{ignoreInitial:false},handlerCss)

    // 自动打开浏览器
    // 因为任务执行特别快，但是文件生成是需要一定的时间的，所以，会造成，立马打开浏览器找不到文件的一个问题，解决，延迟打开浏览器
    setTimeout(function(){
        open("http://localhost:5555/index.html")
    },1000)
    cb()
}
exports.default = series(cleanDir,server)